<template>
  <div class="body" :class="'taber-padding-layout'">
    <div class="cate-custom" :style="[`height:${custom.H}px`]">
      <div
        class="cate-custom-bar cate-custom-fixed"
        :style="[
          `padding-left:calc(750rpx - ${custom.B.right}px)`,
          `width: calc(100% - (750rpx - ${custom.B.right}px))`,
          `height:${custom.H}px`,
        ]"
      >
        <div
          class="cate-custom-content"
          :style="[
            `padding-top:${custom.B.top}px`,
            `width:calc(100% - ((750rpx - ${custom.B.right}px) * 3 + ${custom.B.width}px))`,
            `height:${custom.capsuleH}px`,
          ]"
        >
          <div
            class="cate-custom-text"
            :style="[
              `height:${custom.capsuleH}px`,
              `line-height: ${custom.capsuleH}px`,
            ]"
          >
            商品分类
          </div>
          <!-- 搜索框 -->
          <div
            @click="toSearch"
            :style="[
              `width:calc(100% - 750rpx + ${custom.B.right}px - 144rpx)`,
              `height:calc(${custom.capsuleH}px - 2rpx)`,
              `line-height:calc(${custom.capsuleH}px - 2rpx)`,
            ]"
          >
            <div class="cate-custom-search">
              <text class="icon icon-sousuo"></text>
              <text>搜索</text>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="cate-main layout-"
      :class="`layout-${DIYCATEGROY}`"
      v-if="!initLoading"
    >
      <!-- 模板1_1  一级大图-->
      <template v-if="DIYCATEGROY == '1_1'">
        <div
          class="item"
          v-for="(item, index) in cateList"
          :key="index"
          @click="toGoodsList(item.id)"
        >
          <image
            class="image"
            :src="$utils.staticimg(item.image)"
            mode="widthFix"
          ></image>
        </div>
      </template>

      <template v-if="DIYCATEGROY == '1_2'">
        <!-- 模板1_2 一级小图-->
        <div
          class="item"
          v-for="(item, index) in cateList"
          :key="index"
          @click="toGoodsList(item.id)"
        >
          <image :src="$utils.staticimg(item.image)" mode="aspectFill"></image>
          <div class="title te">{{ item.cate_name }}</div>
        </div>
      </template>

      <template v-if="DIYCATEGROY == '1_3'">
        <!-- 模板1_3 一级-->
        <scroll-view
          scroll-y
          class="cate-layout-left"
          :style="{ top: custom.H + 'px' }"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <template v-for="(item, index) in cateList" :key="index">
            <div
              class="item"
              :id="'s' + index"
              :class="index == curCate ? 'active' : ''"
              @click="onCurCate(index)"
            >
              <div
                class="label"
                v-if="index == curCate"
                :style="[
                  `background:${DIYTHEME?.host_bg}`,
                  `color:${DIYTHEME?.host_color}`,
                ]"
              ></div>
              <div
                class="title te"
                :style="[`color: ${index == curCate ? DIYTHEME?.host_bg : ''}`]"
              >
                {{ item.cate_name }}
              </div>
            </div>
          </template>
        </scroll-view>
      </template>

      <template v-if="DIYCATEGROY == '1_4'">
        <!-- 模板1_4 一级-->
        <div
          class="item"
          :class="index == curCate ? 'active' : ''"
          v-for="(item, index) in cateList"
          :key="index"
          @click="toGoodsList(item.id)"
        >
          <hover
            ><div class="title te">{{ item.cate_name }}</div></hover
          >
        </div>
      </template>

      <template v-if="DIYCATEGROY == '2_1'">
        <!-- 模板2_1 二级 -->
        <scroll-view
          scroll-y
          class="cate-layout-left"
          :style="[`top:${custom.H}px`]"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <template v-for="(item, index) in cateList" :key="index">
            <div
              class="item"
              :class="index == curCate ? 'active' : ''"
              @click="onCurCate(index)"
            >
              <div
                class="label"
                v-if="index == curCate"
                :style="[
                  `background:${DIYTHEME?.host_bg}`,
                  `color: ${DIYTHEME?.host_color}`,
                ]"
              ></div>
              <div
                class="title te"
                :style="[`color: ${index == curCate ? DIYTHEME?.host_bg : ''}`]"
              >
                {{ item.cate_name }}
              </div>
            </div>
          </template>
        </scroll-view>
        <div class="cate-sub-main">
          <image
            class="cate-image mt10 fade-show"
            :src="$utils.staticimg(cateList[curCate].image)"
            mode="widthFix"
            v-if="cateList[curCate] && cateList[curCate].image_adv"
          ></image>
          <div class="sub-list">
            <template v-if="cateList[curCate] && cateList[curCate].sub">
              <template
                v-for="(item, index) in cateList[curCate].sub"
                :key="index"
              >
                <div class="sub-item fade-show" @click="toGoodsList(item.id)">
                  <div class="sub-title te">{{ item.cate_name }}</div>
                </div>
              </template>
            </template>
          </div>
        </div>
      </template>

      <template v-if="DIYCATEGROY == '2_2'">
        <!-- 模板2_2 二级 -->

        <scroll-view
          scroll-y
          class="cate-layout-left"
          :style="[`top:${custom.H}px`]"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <template v-for="(item, index) in cateList" :key="index">
            <div
              class="item"
              :class="index == curCate ? 'active' : ''"
              @click="onCurCate(index)"
            >
              <div
                class="label"
                v-if="index == curCate"
                :style="[
                  `background:${DIYTHEME?.host_bg}`,
                  `color: ${DIYTHEME?.host_color}`,
                ]"
              ></div>
              <div
                class="title te"
                :style="{ color: index == curCate ? DIYTHEME?.host_bg : '' }"
              >
                {{ item.cate_name }}
              </div>
            </div>
          </template>
        </scroll-view>
        <div class="cate-sub-main">
          <image
            class="cate-image mt10 fade-show"
            :src="$utils.staticimg(cateList[curCate].image)"
            v-if="cateList[curCate] && cateList[curCate].image"
            mode="widthFix"
          ></image>
          <div class="sub-list">
            <template v-if="cateList[curCate] && cateList[curCate].sub">
              <template
                v-for="(item, index) in cateList[curCate].sub"
                :key="index"
              >
                <div class="sub-item fade-show" @click="toGoodsList(item.id)">
                  <image :src="$utils.staticimg(item.image)" mode="aspectFill">
                  </image>
                  <div class="sub-title te">{{ item.cate_name }}</div>
                </div></template
              >
            </template>
          </div>
        </div>
      </template>

      <template v-if="DIYCATEGROY == '2_3'">
        <!-- 模板2_3 一级-->
        <scroll-view
          scroll-y
          class="cate-layout-left fade-show"
          :style="[`top:${custom.H}px`]"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <div
            class="item"
            :class="index == curCate ? 'active' : ''"
            v-for="(item, index) in cateList"
            :key="index"
            @click="onCurCate(index)"
          >
            <div
              class="label"
              v-if="index == curCate"
              :style="{ background: curCate == index ? DIYTHEME?.host_bg : '' }"
            ></div>
            <div
              class="title te"
              :style="{ color: curCate == index ? DIYTHEME?.host_bg : '' }"
            >
              {{ item.cate_name }}
            </div>
          </div>
        </scroll-view>
        <scroll-view
          scroll-x
          class="cate-sub-top fade-show"
          :style="[`top:${custom.H}px`]"
        >
          <div
            class="item"
            :class="subCurCate == 0 ? 'active' : ''"
            :style="{
              borderColor: subCurCate == 0 ? DIYTHEME?.host_bg : '',
              color: subCurCate == 0 ? DIYTHEME?.host_bg : '',
            }"
            @click="onCurSubCate(0, cateList[curCate].id)"
          >
            全部
          </div>
          <template v-if="cateList[curCate] && cateList[curCate].sub">
            <template
              v-for="(item, index) in cateList[curCate].sub"
              :key="index"
            >
              <div
                class="item"
                :class="subCurCate == index + 1 ? 'active' : ''"
                @click="onCurSubCate(index + 1, item.id)"
                :style="{
                  borderColor: subCurCate == index + 1 ? DIYTHEME?.host_bg : '',
                  color: subCurCate == index + 1 ? DIYTHEME?.host_bg : '',
                }"
              >
                {{ item.cate_name }}
              </div>
            </template>
          </template>
        </scroll-view>
      </template>

      <template v-if="DIYCATEGROY == '3_1'">
        <scroll-view
          scroll-y
          class="cate-layout-left"
          :style="[`top:calc(${custom.H}px)`]"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <template v-for="(item, index) in cateList" :key="index">
            <div
              class="item"
              :class="index == curCate ? 'active' : ''"
              @click="onCurCate(index)"
            >
              <div
                class="label"
                v-if="index == curCate"
                :style="{
                  background: curCate == index ? DIYTHEME?.host_bg : '',
                }"
              ></div>
              <div
                class="title t3"
                :style="{ color: curCate == index ? DIYTHEME?.host_bg : '' }"
              >
                {{ item.cate_name }}
              </div>
            </div>
          </template>
        </scroll-view>
        <scroll-view
          scroll-y
          class="cate-sub-main"
          :style="[`top:calc(${custom.H}px + 20rpx)`]"
        >
          <image
            class="cate-image fade-show"
            :src="$utils.staticimg(cateList[curCate].image)"
            v-if="cateList[curCate] && cateList[curCate].image"
            mode="widthFix"
          ></image>
          <template v-for="(item, index) in cateList[curCate].sub" :key="index">
            <template v-if="item.sub">
              <div class="sub-list-title te">
                {{ item.cate_name }}
              </div>
              <div class="sub-list">
                <template v-for="(items, indexs) in item.sub" :key="indexs">
                  <div
                    class="sub-item fade-show"
                    @click="toGoodsList(items.id)"
                  >
                    <div class="sub-title te">{{ items.cate_name }}</div>
                  </div>
                </template>
              </div>
            </template>
          </template>
        </scroll-view>
      </template>

      <template v-if="DIYCATEGROY == '3_2'">
        <scroll-view
          scroll-y
          class="cate-layout-left"
          :style="[`top:calc(${custom.H}px)`]"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <template v-for="(item, index) in cateList" :key="index">
            <div
              class="item"
              :class="index == curCate ? 'active' : ''"
              @click="onCurCate(index)"
            >
              <div
                class="label"
                v-if="index == curCate"
                :style="{
                  background: DIYTHEME?.host_bg,
                  color: DIYTHEME?.host_color,
                }"
              ></div>
              <div
                class="title te"
                :style="{ color: index == curCate ? DIYTHEME?.host_bg : '' }"
              >
                {{ item.cate_name }}
              </div>
            </div>
          </template>
        </scroll-view>
        <scroll-view
          scroll-y
          class="cate-sub-main"
          :style="[`top:calc(${custom.H}px + 20rpx)`]"
          v-if="cateList[curCate]"
        >
          <image
            class="cate-image mt10 fade-show"
            :src="$utils.staticimg(cateList[curCate].image)"
            mode="widthFix"
            v-if="cateList[curCate] && cateList[curCate].image"
          ></image>
          <div v-for="(item, index) in cateList[curCate].sub" :key="index">
            <div class="sub-list-title te">
              {{ item.cate_name }}
            </div>
            <div class="sub-list">
              <template v-if="item.sub">
                <template v-for="(items, indexs) in item.sub" :key="indexs">
                  <div
                    class="sub-item fade-show"
                    @click="toGoodsList(items.id)"
                  >
                    <image
                      :src="$utils.staticimg(items.image)"
                      mode="aspectFill"
                    ></image>
                    <div class="sub-title te">{{ items.cate_name }}</div>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </scroll-view>
      </template>

      <template v-if="DIYCATEGROY == '3_3'">
        <scroll-view
          scroll-y
          class="cate-layout-left"
          :class="`taber-padding-layout`"
          :style="[`top:calc(${custom.H}px)`]"
          :scroll-top="leftScrollTop"
          @scroll="scrollMove"
          :scroll-with-animation="true"
        >
          <div class="cate-layout-left-main">
            <template v-for="(item, index) in cateList" :key="index">
              <div class="item" :class="index == curCate ? 'active' : ''">
                <div class="title te" @click="onCurCate(index)">
                  {{ item.cate_name }}
                </div>

                <template v-if="index == curCate && item.sub">
                  <div class="item-main">
                    <template v-for="(items, indexs) in item.sub" :key="indexs">
                      <div
                        class="item-main-items"
                        @click="onCurSubCate(indexs, items.id)"
                      >
                        <div
                          class="label"
                          v-if="indexs == subCurCate"
                          :style="{
                            background: DIYTHEME?.host_bg,
                            color: DIYTHEME?.host_color,
                          }"
                        ></div>
                        <div
                          class="te"
                          :style="{
                            color:
                              indexs == subCurCate ? DIYTHEME?.host_bg : '',
                          }"
                        >
                          {{ items.cate_name }}
                        </div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </scroll-view>
        <scroll-view
          scroll-x
          class="cate-sub-top"
          :style="[`top:calc(${custom.H}px)`]"
        >
          <div
            class="item"
            :class="subCurCate2 == 0 ? 'active' : ''"
            :style="{
              borderColor: subCurCate2 == 0 ? DIYTHEME?.host_bg : '',
              color: subCurCate2 == 0 ? DIYTHEME?.host_bg : '',
            }"
            @click="
              onCurSubCate2(
                0,
                cateList[curCate].sub.length == 0
                  ? 0
                  : cateList[curCate].sub[subCurCate].id
              )
            "
          >
            全部
          </div>
          <template v-if="cateList[curCate].sub">
            <template
              v-for="(item, index) in cateList[curCate].sub[subCurCate].sub"
              :key="index"
            >
              <div
                class="item"
                :class="subCurCate2 == index + 1 ? 'active' : ''"
                @click="onCurSubCate2(index + 1, item.id)"
                :style="{
                  borderColor:
                    subCurCate2 == index + 1 ? DIYTHEME?.host_bg : '',
                  color: subCurCate2 == index + 1 ? DIYTHEME?.host_bg : '',
                }"
              >
                {{ item.cate_name }}
              </div>
            </template>
          </template>
        </scroll-view>
      </template>

      <!-- goods-list -->
      <template v-if="isGoodsLayout()">
        <scroll-view
          class="cate-goods-list-main"
          scroll-y
          :style="[
            `top:calc(${custom.H}px + ${
              DIYCATEGROY == '1_3'
                ? 20
                : $utils.inArray(DIYCATEGROY, ['2_3', '3_3'])
                ? 90
                : 0
            }rpx)`,
          ]"
          @scrolltolower="lower"
        >
          <image
            class="cate-image"
            :src="$utils.staticimg(cateList[curCate].image)"
            mode="widthFix"
            v-if="cateList[curCate] && cateList[curCate].image"
          ></image>
          <div class="goods-list fade-show">
            <template v-for="(item, index) in goodsList" :key="index">
              <div class="goods-item">
                <div class="goods-image" @click="toGoods(item.id)">
                  <image
                    :src="$utils.staticimg(item.goods_image)"
                    mode="aspectFill"
                  ></image>
                  <div class="goods-sell-out" v-if="item.stock == 0">
                    <div class="goods-sell-out-text">已售罄</div>
                  </div>
                </div>
                <div class="goods-item-right">
                  <div class="goods-name te2" @click="toGoods(item.id)">
                    {{ item.goods_name }}
                  </div>
                  <div class="flex items-center mt2">
                    <money market :value="item.market_price"></money>
                    <div class="goods-sales" v-if="item.goods_sales > 0">
                      销量{{ item.goods_sales }}
                    </div>
                  </div>
                  <div class="goods-bottom">
                    <div class="flex items-center mt2">
                      <money :value="item.goods_price"></money>
                    </div>
                    <!-- 按钮 -->
                    <!-- 加入购物车  多规格-->
                    <template v-if="item.spec_type.value == 2">
                      <div
                        class="goods-cart-btn fade-show"
                        @click.stop="toSku(item.id, index)"
                        :style="[
                          `background: ${DIYTHEME?.host_bg}`,
                          `color: ${DIYTHEME?.host_color}`,
                        ]"
                      >
                        <div class="goods-cart-btn-icon icon icon-jia"></div>
                        <div
                          v-if="item.goods_cart_count > 0"
                          class="goods-cart-count"
                        >
                          {{ item.goods_cart_count }}
                        </div>
                      </div>
                    </template>

                    <!-- 加入购物车  单规格-->
                    <template v-if="item.spec_type.value == 1">
                      <template v-if="item.goods_cart_count == 0">
                        <div
                          class="goods-cart-btn"
                          @click.stop="
                            toSkus(item.id, item.goods_sku_id, index)
                          "
                          :style="[
                            `background: ${DIYTHEME?.host_bg}`,
                            `color: ${DIYTHEME?.host_color}`,
                          ]"
                        >
                          <div class="goods-cart-btn-icon icon icon-jia"></div>
                        </div>
                      </template>
                      <template v-if="item.goods_cart_count > 0">
                        <numberBox
                          :max="item.goods_stock"
                          v-model="item.goods_cart_count"
                          @change="changeNum"
                          :index="index"
                          :params="{
                            goodsId: item.id,
                            skuId: item.goods_sku_id,
                          }"
                          :tips="
                            '购物车已经加入了' +
                            item.goods_cart_count +
                            '件，不能再加入了哦,赶紧去购买吧'
                          "
                          :inputdisabled="true"
                          height="29"
                          width="40"
                        >
                        </numberBox>
                      </template>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <loadmore :visible="initGoodsLoading"></loadmore>
          <template v-if="!initGoodsLoading && goodsList.length > 0">
            <!--加载loadding-->
            <loadmore
              :visible="listPage.pullUpOn && listPage.loadmore"
            ></loadmore>
            <nomore :visible="!listPage.pullUpOn"></nomore>
          </template>
          <empty
            v-if="!initGoodsLoading && goodsList.length == 0"
            text="暂无商品"
          ></empty>
        </scroll-view>
      </template>
    </div>

    <goodsSku
      ref="goodsSkuRef"
      :goodsId="goodsId"
      @init="toInitGoodsData"
      bottom="0"
    ></goodsSku>
  </div>
  <init-load v-if="initLoading"></init-load>
</template>
  
  <script setup lang="ts">
import { ref, getCurrentInstance, nextTick } from "vue";
import numberBox from "@/components/ui/numberbox/index.vue";
import goodsSku from "@/components/goods-sku/index.vue";
import loadmore from "@/components/ui/more/loadmore.vue";
import nomore from "@/components/ui/more/nomore.vue";

import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
import { onShow } from "@dcloudio/uni-app";
import { getGoodsCategory } from "@/api/goods-categroy";
import { getGoodsList } from "@/api/goods";
import { listPageType, Result, ResultError } from "@/types";
import { createCart, updateCart } from "@/api/cart";

const { DIYTHEME, DIYCATEGROY, custom } = storeToRefs(useConfig());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const cateList = ref<any>([]);

const goodsId = ref<number | string>(0);

const goodsCateId = ref<string | number>(0);

const curCate = ref<string | number>(0);

const goodsList = ref<any>([]);

const listPage = ref<listPageType>({
  page: 1,
  last: 1,
  pullUpOn: true,
  loadmore: true,
});

const subCurCate2 = ref<number>(0);

const subCurCate = ref<number>(0);

// 左
const leftScrollTop = ref<number>(0);

const moveParams = ref<any>({});

const toInit = () => {
  getGoodsCategory()
    .then((res: Result) => {
      initLoading.value = false;
      cateList.value = res.data;
      toInitSelect();
      if (isGoodsLayout()) {
        toInitGoodsData();
      }
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const toInitSelect = () => {
  goodsCateId.value = cateList.value[0].id;
  if (goodsCateId.value > 0) {
    for (let k in cateList.value) {
      if (cateList.value[k].id == goodsCateId.value) {
        curCate.value = k;
        getRect("#s" + curCate.value);
      }
    }
  }
};

const initGoodsLoading = ref<boolean>(false);

// 获取商品
const toInitGoodsData = (isInit: boolean = false) => {
  initGoodsLoading.value = true;
  getGoodsList({
    page: listPage.value.page,
    cate_id: goodsCateId.value,
  })
    .then((res: Result) => {
      initGoodsLoading.value = false;
      if (isInit) {
        goodsList.value = [];
      }
      goodsList.value =
        listPage.value.page == 1
          ? res.data.data
          : goodsList.value.concat(res.data.data);

      listPage.value.last = res.data.last_page;
      listPage.value.pullUpOn =
        res.data.last_page <= 1 && listPage.value.page == 1 ? false : true;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onShow(() => {
  toInit();
});

const onCurCate = (index: number) => {
  let cur = index,
    subcur = 0,
    cateId = cateList.value[cur].id;
  if (
    DIYCATEGROY.value == "3_3" &&
    cateList.value[cur].sub != undefined &&
    cateList.value[cur].sub.length > 0
  ) {
    goodsCateId.value = cateList.value[cur].sub[subcur].id;
  }
  curCate.value = index;
  goodsCateId.value = cateId;
  listPage.value.page = 1;
  listPage.value.last = 1;
  subCurCate2.value = 0;
  subCurCate.value = subcur;
  if (isGoodsLayout()) {
    toInitGoodsData(true);
  }
  getRect("#s" + curCate.value);
};

const onCurSubCate = (subcur: number, cid: number) => {
  subCurCate2.value = 0;
  subCurCate.value = subcur;
  goodsCateId.value = cid;
  listPage.value.page = 1;
  listPage.value.last = 1;
  goodsList.value = [];
  if (isGoodsLayout()) {
    toInitGoodsData(true);
  }
};

const onCurSubCate2 = (subcur: number, cid: number) => {
  subCurCate2.value = subcur;
  goodsCateId.value = cid;
  listPage.value.page = 1;
  listPage.value.last = 1;
  goodsList.value = [];
  if (isGoodsLayout()) {
    toInitGoodsData(true);
  }
};

const scrollMove = (e: any) => {
  moveParams.value.scrollTop = e.detail.scrollTop;
};

const lower = () => {
  listPage.value.loadmore = true;
  if (listPage.value.page == listPage.value.last) {
    listPage.value.pullUpOn = false;
    listPage.value.loadmore = false;
  } else {
    listPage.value.page++;
    toInitGoodsData();
  }
};

const toSearch = () => {};

const goodsSkuRef = ref<HTMLElement>();

const toSku = (id: number, index: number) => {
  goodsId.value = id;
  nextTick(() => {
    if ($utils.checkLogin("login")) {
      proxy?.$refs["goodsSkuRef"]?.open();
    }
  });
};
const skuClose = () => {
  proxy?.$refs["goodsSkuRef"]?.close();
};

const toSkus = (id: number, skuId: number, index: number) => {
  let obj = {
    goods_id: id,
    goods_num: 1,
    goods_sku_id: skuId,
  };
  addCart(obj, index);
};

interface cartDataType {
  goods_id: number;
  goods_num: number;
  goods_sku_id: number;
}

const addCart = (obj: cartDataType, index: number) => {
  createCart(obj)
    .then((res: Result) => {
      goodsList.value[index].goods_cart_count = obj.goods_num;
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const _updateCart = (obj: cartDataType, index: number) => {
  updateCart(obj)
    .then((res: Result) => {
      goodsList.value[index].goods_cart_count = obj.goods_num;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const changeNum = (obj: { value: number; index: number; params: any }) => {
  _updateCart(
    {
      goods_id: obj.params.goodsId,
      goods_num: obj.value,
      goods_sku_id: obj.params.skuId,
    },
    obj.index
  );
};

const toGoodsList = (cateId: number) => {};

const toGoods = (id: number) => {
  $utils.routeRedirectTo("/pages/goods/detail?id=" + id);
};

const getRect = (ele: string) => {
  //节点查询
  console.log("节点查询", ele);
  return false;
  uni
    .createSelectorQuery()
    .select(ele)
    .boundingClientRect((rect: any) => {
      console.log(rect);
      moveParams.value.subTop = rect.top;
      moveParams.value.subHalfHeight = rect.height / 2;
      moveParams.value.screenHalfHeight =
        uni.getSystemInfoSync().windowHeight / 2;
      moveTo();
    })
    .exec();
};

const moveTo = () => {
  let subTop = moveParams.value.subTop;
  let screenHalfHeight = moveParams.value.screenHalfHeight;
  let subHalfHeight = moveParams.value.subHalfHeight;
  let scrollTop = moveParams.value.scrollTop;

  let distance = subTop - screenHalfHeight + subHalfHeight;

  scrollTop = scrollTop + distance;

  leftScrollTop.value = scrollTop;
};

//是否需要获取商品
const isGoodsLayout = () => {
  var arr = ["1_3", "2_3", "3_3"];
  if (arr.indexOf(DIYCATEGROY.value) > -1) {
    return true;
  }
  return false;
};
</script>
  
  <style scoped>
.cate-custom {
  display: block;
  position: relative;
}

.cate-custom-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
}

.cate-custom-bar {
  min-height: 0px;
  z-index: 9999;
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.cate-custom-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* padding: 10rpx 0 20rpx; */
}

.cate-custom-text {
  width: 140rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--base-size-default);
  text-align: left;
}

.cate-custom-search {
  margin: 0 30rpx;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  text-align: center;
  border-radius: 100px;
  padding: 0 30rpx;
  height: calc(100% - 2rpx);
  position: relative;
  z-index: 1;
  background: #f5f5f5;
  border: 1rpx solid #e5e5e5;
}

.cate-custom-search text {
  margin: 0 5rpx;
  font-size: var(--base-size-small);
  color: #777;
}

.cate-custom-search .icon {
  font-size: var(--base-size-large);
}

.cate-main .goods-sell-out {
  width: 180rpx;
  height: 180rpx;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  z-index: 9;
}
.cate-main .goods-sell-out-text {
  width: 120rpx;
  height: 120rpx;
  border-radius: 120rpx;
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  text-align: center;
  font-size: var(--base-size-small);
  line-height: 120rpx;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9;
  color: #fff;
}

/* goods-list */
.cate-goods-list-main {
  position: fixed;
  width: calc(100% - 200rpx);
  right: 0;
  top: 0;
  bottom: 0;
}
.cate-goods-list-main .cate-image {
  width: calc(100% - 40rpx);
  margin: 0 20rpx 20rpx;
  border-radius: var(--base-radius-default);
}
.cate-goods-list-main .goods-list {
  padding: 0 20rpx;
}
.cate-goods-list-main .goods-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* height:240rpx; */
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  position: relative;
  border-bottom: 1rpx solid #f5f5f5;
}
.cate-goods-list-main .goods-item:last-child {
  border: 0;
}
.cate-goods-list-main .goods-item:first-child {
  /* height:210rpx; */
  padding-top: 0;
}
.cate-goods-list-main .goods-item .goods-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: var(--base-radius-default);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.cate-goods-list-main .goods-item image {
  width: 180rpx;
  height: 180rpx;
  border-radius: var(--base-radius-default);
}
.cate-goods-list-main .goods-item-right {
  width: calc(100% - 200rpx);
  /* height: 180rpx; */
  position: relative;
}
.cate-goods-list-main .goods-item-right .goods-name {
  line-height: 40rpx;
  max-height: 80rpx;
  font-size: var(--base-size-default);
  width: 100%;
}
.cate-goods-list-main .goods-item .goods-image .goods-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2rpx 8rpx;
  background: #ff3838;
  color: #fff;
  font-size: var(--base-size-small-x);
  border-bottom-right-radius: 10rpx;
}

.cate-goods-list-main .goods-item-right .goods-sales {
  font-size: var(--base-size-small);
  color: #aaaaaa;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  margin-left: 10rpx;
}

.cate-goods-list-main .goods-item-right .goods-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* left: 0; */
  /* margin-top: 10rpx; */
  height: 44rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 1-1 */
.cate-main.layout-1_1 {
  width: calc(100% - 40rpx);
  padding: 20rpx;
}
.cate-main.layout-1_1 .item {
  margin-bottom: 20rpx;
  border-radius: var(--base-radius-default);
  overflow: hidden;
}
.cate-main.layout-1_1 .item .image {
  width: 100%;
  display: block;
}

/* 1-2 */

.cate-main.layout-1_2 {
  width: 100%;
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cate-main.layout-1_2 .item {
  width: calc(33.334% - 20rpx);
  text-align: center;
  margin: 0 10rpx 30rpx;
}
.cate-main.layout-1_2 .item image {
  margin: 20rpx auto;
  height: 160rpx;
  width: 160rpx;
  border-radius: var(--base-radius-default);
}
.cate-main.layout-1_2 .item .title {
  height: 40rpx;
  line-height: 40rpx;
}

.cate-main.layout-1_3 .cate-layout-left {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200rpx;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}

.cate-main.layout-1_3 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  width: calc(100% - 38rpx);
  position: relative;
  text-align: center;
}
.cate-main.layout-1_3 .cate-layout-left .item.active {
  background: #ffffff;
}
.cate-main.layout-1_3 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: var(--base-radius-small-x);
  position: absolute;
  left: 5rpx;
  top: 30rpx;
  background: red;
}
.cate-main.layout-1_3 .cate-layout-left .item.active .title {
  font-weight: bold;
  color: red;
}

/*1-4  */
.cate-main.layout-1_4 {
  width: calc(100% - 20rpx);
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-left: 20rpx;
  padding-right: 20rpx;
}
.cate-main.layout-1_4 .item {
  width: calc(33.334% - 60rpx);
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f2f2f2;
  border-radius: var(--base-radius-small);
  text-align: center;
}

/* 2-1 */
.cate-main.layout-2_1 .cate-layout-left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 180rpx;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}

.cate-main.layout-2_1 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  width: calc(100% - 38rpx);
  position: relative;
  text-align: center;
}
.cate-main.layout-2_1 .cate-layout-left .item.active {
  background: #ffff;
}
.cate-main.layout-2_1 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: var(--base-radius-small-x);
  position: absolute;
  left: 5rpx;
  top: 30rpx;
  background: red;
}
.cate-main.layout-2_1 .cate-layout-left .item.active .title {
  font-weight: bold;
  color: red;
}
.cate-main.layout-2_1 .cate-sub-main {
  position: fixed;
  width: calc(100% - 180rpx);
  right: 0;
}
.cate-main.layout-2_1 .cate-sub-main .cate-image {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  border-radius: var(--base-radius-default);
}
.cate-main.layout-2_1 .cate-sub-main .sub-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.cate-main.layout-2_1 .cate-sub-main .sub-item {
  width: calc(33.334% - 20rpx);
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f2f2f2;
  border-radius: var(--base-radius-small-x);
  text-align: center;
}
.cate-main.layout-2_1 .cate-sub-main .sub-item .title {
  height: 40rpx;
  line-height: 40rpx;
}

/* 2-2 */

.cate-main.layout-2_2 .cate-layout-left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 180rpx;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}

.cate-main.layout-2_2 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  width: calc(100% - 38rpx);
  position: relative;
  text-align: center;
}
.cate-main.layout-2_2 .cate-layout-left .item.active {
  background: #ffff;
}
.cate-main.layout-2_2 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: var(--base-radius-small-x);
  position: absolute;
  left: 5rpx;
  top: 30rpx;
  background: red;
}
.cate-main.layout-2_2 .cate-layout-left .item.active .title {
  font-weight: bold;
  color: red;
}
.cate-main.layout-2_2 .cate-sub-main {
  position: fixed;
  width: calc(100% - 180rpx);
  right: 0;
}
.cate-main.layout-2_2 .cate-sub-main .cate-image {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  border-radius: var(--base-radius-default);
}
.cate-main.layout-2_2 .cate-sub-main .sub-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.cate-main.layout-2_2 .cate-sub-main .sub-item {
  width: calc(33.334% - 20rpx);
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  text-align: center;
}
.cate-main.layout-2_2 .cate-sub-main .sub-item image {
  width: 100%;
  height: 160rpx;
  border-radius: var(--base-radius-default);
}
.cate-main.layout-2_2 .cate-sub-main .sub-item .title {
  height: 40rpx;
  line-height: 40rpx;
}

/* 2-3 */
.cate-main.layout-2_3 .cate-layout-left {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 180rpx;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}

.cate-main.layout-2_3 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  width: calc(100% - 38rpx);
  position: relative;
  text-align: center;
}
.cate-main.layout-2_3 .cate-layout-left .item.active {
  background: #ffff;
}
.cate-main.layout-2_3 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: var(--base-radius-small);
  position: absolute;
  left: 5rpx;
  top: 30rpx;
}
.cate-main.layout-2_3 .cate-layout-left .item.active .title {
  font-weight: bold;
}
.cate-main.layout-2_3 .cate-sub-top {
  position: fixed;
  width: calc(100% - 220rpx);
  right: 0;
  top: 0;
  height: 70rpx;
  padding: 20rpx 20rpx 0;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
}
.cate-main.layout-2_3 .cate-sub-top::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.cate-main.layout-2_3 .cate-sub-top .item {
  margin-right: 20rpx;
  background: #f2f2f2;
  padding: 0 20rpx;
  height: 48rpx;
  line-height: 44rpx;
  font-size: var(--base-size-small);
  border-radius: var(--base-radius-small-x);
  display: inline-block;
  border: 1rpx solid #f2f2f2;
}
.cate-main.layout-2_3 .cate-sub-top .item.active {
  background: none;
}
.cate-main.layout-2_3 .cate-goods-list-main {
  position: fixed;
  width: calc(100% - 180rpx);
  right: 0;
  top: 0;
  bottom: 0;
}

.cate-main.layout-3_1 .cate-layout-left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 180rpx;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}
.cate-main.layout-3_1 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  width: calc(100% - 40rpx);
  position: relative;
  text-align: center;
}
.cate-main.layout-3_1 .cate-layout-left .item.active {
  background: #ffff;
}
.cate-main.layout-3_1 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: 5rpx;
  position: absolute;
  left: 5rpx;
  top: 30rpx;
  background: red;
}
.cate-main.layout-3_1 .cate-layout-left .item.active .title {
  font-weight: bold;
  color: red;
}
.cate-main.layout-3_1 .cate-sub-main {
  position: fixed;
  width: calc(100% - 180rpx);
  right: 0;
  bottom: 0;
}
.cate-main.layout-3_1 .cate-sub-main .cate-image {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  border-radius: 10rpx;
}
.cate-main.layout-3_1 .cate-sub-main .sub-list-title {
  font-size: var(--base-size-default);
  margin: 20rpx 20rpx 0;
}
.cate-main.layout-3_1 .cate-sub-main .sub-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.cate-main.layout-3_1 .cate-sub-main .sub-item {
  width: calc(33.334% - 40rpx);
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  text-align: center;
  padding: 20rpx 10rpx;
  background: #f2f2f2;
  border-radius: 5rpx;
  text-align: center;
}
.cate-main.layout-3_1 .cate-sub-main .sub-item .sub-title {
  height: 40rpx;
  line-height: 40rpx;
}

.cate-main.layout-3_2 .cate-layout-left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 180rpx;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}
.cate-main.layout-3_2 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  width: calc(100% - 40rpx);
  position: relative;
  text-align: center;
}
.cate-main.layout-3_2 .cate-layout-left .item.active {
  background: #ffff;
}
.cate-main.layout-3_2 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: 5rpx;
  position: absolute;
  left: 5rpx;
  top: 30rpx;
  background: red;
}
.cate-main.layout-3_2 .cate-layout-left .item.active .title {
  font-weight: bold;
  color: red;
}
.cate-main.layout-3_2 .cate-sub-main {
  position: fixed;
  width: calc(100% - 180rpx);
  right: 0;
  bottom: 0;
}
.cate-main.layout-3_2 .cate-sub-main .cate-image {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  border-radius: 10rpx;
}
.cate-main.layout-3_2 .cate-sub-main .sub-list-title {
  font-size: var(--base-size-default);
  margin: 20rpx 20rpx 0;
}
.cate-main.layout-3_2 .cate-sub-main .sub-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.cate-main.layout-3_2 .cate-sub-main .sub-item {
  width: calc(33.334% - 20rpx);
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  text-align: center;
}
.cate-main.layout-3_2 .cate-sub-main .sub-item image {
  width: 100%;
  height: 160rpx;
  border-radius: 10rpx;
}
.cate-main.layout-3_2 .cate-sub-main .sub-item .sub-title {
  height: 40rpx;
  line-height: 40rpx;
}

.cate-main.layout-3_3 .cate-layout-left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 220rpx;
}
.cate-layout-left-main {
  width: 200rpx;
  height: 100%;
  background: #f6fafd;
  border-right: 1rpx solid #f5f5f5;
}
.cate-main.layout-3_3 .cate-layout-left .item {
  height: 100rpx;
  line-height: 100rpx;
  width: calc(100% - 40rpx);
  padding: 0 20rpx;
  position: relative;
  text-align: center;
  background: #f6fafd;
}
.cate-main.layout-3_3 .cate-layout-left .item.active {
  z-index: 99;
  height: auto;
  width: calc(100% - 30rpx);
  background: #ffffff;
  box-shadow: 0 5rpx 10rpx 0 rgba(0, 0, 0, 0.1);
  border-top-right-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}
.cate-main.layout-3_3 .cate-layout-left .item.active .item-main {
  border-top: 1rpx solid #f5f5f5;
}
.cate-main.layout-3_3
  .cate-layout-left
  .item.active
  .item-main
  .item-main-items {
  position: relative;
}
.cate-main.layout-3_3 .cate-layout-left .item.active .label {
  width: 10rpx;
  height: 40rpx;
  border-radius: var(--base-radius-small-x);
  position: absolute;
  left: -15rpx;
  top: 30rpx;
  background: red;
}
.cate-main.layout-3_3 .cate-layout-left .item.active .title {
  font-weight: bold;
}

.cate-main.layout-3_3 .cate-sub-top {
  position: fixed;
  width: calc(100% - 240rpx);
  right: 0;
  top: 0;
  height: 70rpx;
  padding: 20rpx 20rpx 0;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
}
.cate-main.layout-3_3 .cate-sub-top::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.cate-main.layout-3_3 .cate-sub-top .item {
  margin-right: 20rpx;
  background: #f2f2f2;
  padding: 0 20rpx;
  height: 48rpx;
  line-height: 46rpx;
  font-size: var(--base-size-small-x);
  border-radius: var(--base-radius-small-x);
  display: inline-block;
  border: 1rpx solid #f2f2f2;
}
.cate-main.layout-3_3 .cate-sub-top .item.active {
  background: none;
}
.cate-main.layout-3_3 .cate-sub-main {
  position: fixed;
  width: calc(100% - 200rpx);
  right: 0;
  top: 0;
  bottom: 0;
}
.cate-main.layout-3_3 .cate-sub-main .cate-image {
  width: calc(100% - 40rpx);
  margin: 0 20rpx 20rpx;
  border-radius: var(--base-radius-default);
}
</style>
  